<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>品牌列表案例</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="app">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加品牌</h3>
			</div>
			<div class="panel-body form-inline">
				<label>ID: 
					<input type="text" class="form-control" v-model="id"/>
				</label>
				<!--定义键盘响应事件-->
				<label>Name: 
					<input type="text" class="form-control" v-model="name" @keyup.enter="add"/>
				</label>
				
				<!--在Vue中使用事件绑定机制为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了-->
				<input type="button" value="添加" class="btn btn-primary" @click="add()"/>
			
				<label>按关键字搜索：
					<input  type="text" class="form-control" v-model="keywords" id="search"/>
				</label>
			</div>
		</div>
		
		<table class="table table-bordered table-hover table striped">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Ctime</th>
					<th>Operation</th>
				</tr>
			</thead>
			<tbody>
				<!--
					之前，v-for中的数据都是直接从data上的list中直接渲染过来的
					现在，我们自定义了一个search方法，同时把关键字，通过传参的形式传递给search方法
				-->
				<!--<tr v-for="item in list" v-bind:key="item.id">-->
				<!--在search 方法内部，通过执行for循环，把所有符合搜索条件的数据通过search方法返回-->
				<tr v-for="item in search(keywords)" :key="item.id">
					<th>{{ item.id }}</th>
					<th>{{ item.name }}</th>
					<th>{{ item.ctime }}</th>
					<th>
						<a href="" @click.prevent="del(item.id)">删除</a>
					</th>
				</tr>
			</tbody>
		</table>
	</div>
	
	<script type="text/javascript">
		/*
		 * forEach  some  filter  findIndex 这些都属于数组的新方法 
		 * 都会对数组中的每一项进行遍历，执行相关的操作
		 * */
		var vm = new Vue({
			el: '#app',
			data: {
				id: '',
				name: '',
				keywords: '',
				list: [
					{ id: 1, name: '奔驰', ctime: new Date() },
					{ id: 2, name: '宝马', ctime: new Date() },
				],
			},
			methods: {
				// 在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据应用到页面上
				add(){
					//this.list.push({id: this.id, name: this.name, ctime: new Date()});
					var car = { id: this.id, name: this.name, ctime: new Date()};
					this.list.push(car);
					this.id = this.name = '';
				},
				del(id){
					//some方法会循环数组，遇到true就会结束循环
					/*this.list.some((item, i) => {
						if(item.id == id){
							//删除从第 i个开始的1个数组 splice(索引，删除数量)
							this.list.splice(i, 1);
							return true;
						}
					});*/
					
					// 索引查找函数
					var index = this.list.findIndex(item => {
						if(item.id == id){
							return true;
						}
					});
					console.log(index);
					this.list.splice(index, 1);
				},
				search(keywords){
					/*var newList = [];
					this.list.forEach(item => {
						// 0表示存在 1表示不存在
						if(item.name.indexOf(keywords) != -1){
							newList.push(item);
						}
					});
					return newList;*/
					var newList = this.list.filter(item =>{
						if(item.name.includes(keywords)){
							return item;
						}
					});
					
					return newList;
				}
			}
		});
		
		//让输入框默认获得焦点
		document.getElementById("search").focus();
	</script>
</body>
</html>
